<template>
    <div class="vehicleInforDetail">
        <div class="top">
            <div class="top_l">
                <div class="company">
                    <img src="~@/assets/images/icon_huoche.png" class="logo" />
                </div>
                <div class="userinfo">
                    <div>{{ detailParams.vehicleNumber }}</div>
                    <div>
                        <span style="margin-right: 10px">
                            {{ detailParams.emissionStandard }}
                        </span>
                        <span style="margin-right: 10px">
                            {{ detailParams.usageType }}
                        </span>
                        <span>
                            {{ detailParams.drivingVehicleType }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="top_r">
                <el-button type="primary" @click="auditWay">审核</el-button>

                <el-button type="primary" @click="update">编辑</el-button>
                <el-button @click="edit">删除</el-button>
            </div>
        </div>

        <div class="bottom">
            <el-tabs v-model="activeName" @tab-click="tabHandleClick">
                <el-tab-pane label="车辆信息" name="0">
                    <div style="padding: 30px">
                        <p style="font-size: 20px">基础信息</p>
                        <el-row>
                            <el-col span="6" class="mb20">号牌颜色：
                                <span> {{ detailParams.vehicleColor }}</span>
                            </el-col>
                            <el-col span="6" class="mb20">排放标准：
                                <span> {{ detailParams.emissionStandard }}</span>
                            </el-col>
                            <el-col span="6" class="mb20">联网状态：
                                <span>
                                    {{ detailParams.networkStatus == 1 ? "已联网" : "未联网" }}
                                </span>
                            
                            </el-col>
                            <el-col span="6" class="mb20">是否集装箱：
                                <span>
                                    {{ detailParams.isContainer == 1 ? "是" : "否" }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">车型：

                                <span> {{ detailParams.vehicleType }}</span>
                            </el-col>
                            <el-col span="6" class="mb20">所有人电话：
                                <span> {{ detailParams.ownerPhone }}</span>
                            </el-col>
                            <el-col span="6" class="mb20">运营证号：
                                <span> {{ detailParams.operatingNumber }}</span></el-col>
                            <el-col span="6" class="mb20">是否启用：
                                <el-tag v-if="detailParams.isActive == 1" type="success">
                                    启用
                                </el-tag>
                                <el-tag v-else type="danger">
                                    禁用
                                </el-tag>
                                <!-- <span>
                                    {{ detailParams.isActive == 1 ? "是" : "否" }}
                                </span> -->
                            </el-col>
                            <el-col span="6" class="mb20">审核状态：
                                <el-tag v-if="detailParams.reviewStatus == 0" type="warning">
                                    待审核
                                </el-tag>
                             
                                <el-tag type="success" v-else-if="detailParams.reviewStatus == 1">已审核</el-tag>
                                <el-tag v-else type="danger"> 已驳回 </el-tag>
                            </el-col>
                            <el-col span="6" class="mb20">车辆状态：
                                <el-tag v-if="detailParams.vehicleStatus == 0" type="danger">
                                    停用
                                </el-tag>
                                <el-tag v-else-if="detailParams.vehicleStatus == 1" type="success">
                                    可用
                                </el-tag>
                            </el-col>
                        </el-row>
                        <p style="font-size: 20px">行驶证信息</p>
                        <el-row>
                            <el-col span="6" class="mb20">行驶证号：

                                <span>
                                    {{ detailParams.drivingLicenseNumber }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">车辆类型：

                                <span>
                                    {{ detailParams.drivingVehicleType }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">所有人：
                                <span>
                                    {{ detailParams.ownerName }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">住址：
                                <span>
                                    {{ detailParams.address }}
                                </span></el-col>
                            <el-col span="6" class="mb20">使用性质：
                                <span>
                                    {{ detailParams.usageType }}
                                </span></el-col>
                            <el-col span="6" class="mb20">品牌型号：
                                <span>
                                    {{ detailParams.brand }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">车辆识别代号：  <span>
                                    {{ detailParams.vinNumber }}
                                </span></el-col>
                            <el-col span="6" class="mb20">发动机号：<span>
                                    {{ detailParams.engineNumber }}
                                </span></el-col>
                            <el-col span="6" class="mb20">发证时间：
                                <span>
                                    {{ detailParams.issueDate }}
                                </span>
                            </el-col>
                            <el-col span="6" class="mb20">注册时间：<span>
                                    {{ detailParams.registrationDate }}
                                </span></el-col>
                            <el-col span="6" class="mb20">燃料类型：<span>
                                    {{ detailParams.fuelType }}
                                </span></el-col>
                            <el-col span="6" class="mb20">核定载质量(kg)：<span>
                                    {{ detailParams.allowedLoadWeight }}
                                </span></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" :xl="12" :lg="24" :md="24">
                                <p style="font-size: 20px">证件照片</p>

                                <el-row type="flex" class="row-bg" justify="start">
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">行驶证(主页)</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.licensePhotoMain"
                                                    :preview-src-list="[detailParams.licensePhotoMain]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">行驶证(副页)</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.licensePhotoCopy"
                                                    :preview-src-list="[detailParams.licensePhotoCopy]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">运营证</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.operatingLicensePhoto"
                                                    :preview-src-list="[detailParams.operatingLicensePhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">车头</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.vehiclePhoto"
                                                    :preview-src-list="[detailParams.vehiclePhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">车身铭牌</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.vehicleVinPlatePhoto"
                                                    :preview-src-list="[detailParams.vehicleVinPlatePhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="12" :xl="12" :lg="24" :md="24">
                                <p style="font-size: 20px">材料照片</p>

                                <el-row type="flex" class="row-bg" justify="start">
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">环保清单</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.envInspectionPhoto"
                                                    :preview-src-list="[detailParams.envInspectionPhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">机动车环保网查询</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.engineEnvQueryPhoto"
                                                    :preview-src-list="[detailParams.engineEnvQueryPhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">重型柴油车辆排放阶段</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width="100" :height="100" :src="detailParams.heavyDieselVehicleEmissionPhoto"
                                                    :preview-src-list="[detailParams.heavyDieselVehicleEmissionPhoto]" />
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <p style="font-size: 20px">审核信息</p>
                        <!-- 审核信息 -->
                        <!-- 'calc(100vh - 324px -  .84rem)' -->
                        <LPTablePage :showPage="false" :showIndex="false" :table-data="auditTableData"
                            :table-column="auditTableColumn" align="left" :randomColumnKey="true" ref="auditTablePage"
                            :maxHeight="'300px'"
                            >

                            <template slot="auditResult" slot-scope="scope">
                                <!-- auditResult -->
                                <span v-if="scope.row.auditResult==1">
                                通过
                                </span>
                                <span v-if="scope.row.auditResult==2">
                                驳回
                                </span>
                            </template>
                        </LPTablePage>
                        <p style="font-size: 20px">系统信息</p>
                        <el-row>
                            <el-col span="6" class="mb20">操作时间：350181111122223333</el-col>
                            <el-col span="6" class="mb20">操作人：350181111122223333</el-col>
                            <el-col span="6" class="mb20">创建人：350181111122223333</el-col>
                            <el-col span="6" class="mb20">创建时间：350181111122223333</el-col>
                            <el-col span="6" class="mb20">创建来源：350181111122223333</el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="物流公司" name="1">
                    <!-- <div style="
                    background-color: #fff;
        padding: 0 .3rem;
                    ">
                        <search-bar v-model="relevanceVehicleSearchModel" :search-data="relevanceVehicleSearchData"
                            :config="relevanceVehicleSearchData" @search="handleSearchSubmit"
                            @searchReset="handleSearchReset">
                        </search-bar>
                    </div> -->
                    <div class="record">
                        <LPTablePage :showIndex="true" :table-data="relevanceVehicleData"
                            :table-column="relevanceVehicleTableColumn" align="left" :total="relevanceVehicleTotal"
                            :current-page="relevanceVehicleCurrentPage" @handleSizeChange="relevanceVehicleHandleSizeChange"
                            @handleCurrentChange="relevanceVehicleHandleCurrentChange" :randomColumnKey="true"
                            ref="relevanceVehicleTablePage">
                            <template slot="relate" slot-scope="scope">

<span v-if="scope.row.relate == 1">
    临时
</span>
<span v-else>
    自有
</span>
</template>
                        </LPTablePage>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="2">
                    <div style="background-color: #fff; padding: 0 0.3rem">
                        <search-bar v-model="searchModel" :search-data="searchData" :config="searchData"
                            @search="handleSearchSubmit" @searchReset="handleSearchReset">
                        </search-bar>
                    </div>
                    <div class="record">
                        <LPTablePage :showIndex="false" :table-data="tableData" :table-column="tableColumn" align="left"
                            :total="total" :current-page="currentPage" @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange" :randomColumnKey="true" ref="tablePage">
                        </LPTablePage>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 审核 -->
        <base-dialog :visible="auditVisile" title="审核" width="640px" class="addDictDialog"
            @handleDialogSubmit="handleAuditSubmit" @handleDialogCancle="handleAuditCancle">
            <el-form ref="auditParams" :model="auditParams" :rules="dictRule" label-width="120px" class="dictForm"
                label-position="top" size="medium">
                <el-row :gutter="50">
                    <el-col :span="24">
                        <el-form-item label="审核结果:" prop="reviewStatus">
                            <el-radio-group v-model="auditParams.reviewStatus">
                                <el-radio :label="1">通过</el-radio>
                                <el-radio :label="2">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审核说明:" prop="">
                            <el-input v-model.trim="auditParams.reviewDescribe" type="textarea" :rows="2" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </base-dialog>
    </div>
</template>

<script>
import LPTablePage from "@/components/LPTablePage";
import SearchBar from "@/components/SearchBar";
import baseDialog from "@/components/BaseDialog";
import ImagePreview from "@/components/ImagePreview";
import masterDataApi from "@/api/logistics/masterData";
import {auditInfoQueryListByTransportId} from '@/api/logistics/public'
import { closeActiveTag } from "@/utils/lpUtils.js";
import beiGangApi from '@/api/logistics/beigang';
export default {
    name: "vehicleInforDetail",
    components: {
        LPTablePage,
        SearchBar,
        baseDialog,
        ImagePreview,
    },
    data() {
        return {
            auditVisile: false,
            detailParams: {},
            auditParams: {},
            selectOptions: {},
            dictModel: {},
            activeName: "0",
            searchModel: {},
            relevanceVehicleSearchModel: {},
            relevanceVehicleData: [],
            auditTableData:[],
            tableData: [],
            total: 0,
            relevanceVehicleTotal: 0,
            currentPage: 1,
            relevanceVehicleCurrentPage: 1,
            relevanceVehicleSearchData: [
                {
                    placeholder: "车辆状态",
                    prop: "userName",

                    type: "select",

                    options: [
                        { label: "成功", value: "0" },
                        { label: "失败", value: "1" },
                    ],
                },
                {
                    placeholder: "车牌号",
                    prop: "aa",
                },
                {
                    prop: "status",
                    type: "select",
                    placeholder: "是否启用",
                    options: [
                        { label: "成功", value: "0" },
                        { label: "失败", value: "1" },
                    ],
                },

                {
                    prop: "search",
                    type: "button",
                    // policy: ['system.log.query'],
                },
            ],
            searchData: [
                { placeholder: "操作", prop: "ipaddr" },
                { placeholder: "操作事件", prop: "userName" },
                { placeholder: "操作人", prop: "aa" },
                {
                    label: "操作时间",
                    prop: "loginTime",
                    type: "daterangehms",
                    startPlaceholder: "起始时间",
                    endPlaceholder: "结束时间",
                },
                {
                    prop: "search",
                    type: "button",
                    // policy: ['system.log.query'],
                },
            ],
            auditTableColumn: [
              
                { label: "审核时间", prop: "auditTime" },

                { label: "审核人", prop: "auditor" },
                { label: "审核结果", prop: "auditResult",render:true },
                { label: "审核说明", prop: "auditDescription" },
            ],
            relevanceVehicleTableColumn: [
                { label: "关联时间", prop: "relateTime" },

                { label: "物流公司名称", prop: "companyName" },
                { label: "物流公司编码", prop: "logisticsCompanyNumber" },
                { label: "关联类型", prop: "relate" ,render:true},

                { label: "操作人", prop: "auditedBy" },
            ],
            tableColumn: [
                { label: "操作时间", prop: "infoId" },

                { label: "操作人", prop: "userName" },
                { label: "操作", prop: "ipaddr" },
                { label: "操作事件", prop: "infoId" },
            ],
            dictRule: {
                reviewStatus: [{ required: true, trigger: "change", message: "必填" }],
            },
        };
    },
    created() {
        this.getQueryDictDetailByCodeWay("vehicleColor");
        this.getQueryDictDetailByCodeWay("emissionStandard"); //排放标准
    
        this.getQueryDictDetailByCodeWay("vehicleType"); //车型
        this.getQueryDictDetailByCodeWay("drivingVehicleType"); //车辆类型
        this.getQueryDictDetailByCodeWay("usageType"); //使用性质
        this.getQueryDictDetailByCodeWay("fuelType"); //燃料类型
      
    },
    mounted(){
        this.getDetail();
        this.getAuditInfoQueryListByTransportId()
    },
    filters: {
        // optionsFilter(val,name){
        //     let index  = this.selectOptions
        //     return  this.selectOptions[name].dictValue
        // }
    },
    methods: {
        // 获取 审核信息
        getAuditInfoQueryListByTransportId(){
            auditInfoQueryListByTransportId({
                moduleType:3,
                moduleId:this.$route.params.id
            }).then(res=>{
                if(res.code==200){
                    this.auditTableData = res.data
                }
            })
        },
        optionsFilter(val, name) {
           
            let arr = this.selectOptions[name];
            if(arr&&arr.length){
                let index = arr.findIndex((item) => {
                return item.id == val;
            });
            return arr[index].dictValue;
            }else{
                return '暂无'
            }
        },
        // 查详情
        getDetail() {
            masterDataApi.getVehicleInfoDetail(this.$route.params.id).then((res) => {
                if (res.code == 200) {
                    this.detailParams = {
                        ...res.data,
                        vehicleColor: this.optionsFilter(
                            res.data.vehicleColor,
                            "vehicleColor"
                        ),
                        emissionStandard: this.optionsFilter(
                            res.data.emissionStandard,
                            "emissionStandard"
                        ),
                      
                        vehicleType: this.optionsFilter(
                            res.data.vehicleType,
                            "vehicleType"
                        ),
                        drivingVehicleType: this.optionsFilter(
                            res.data.drivingVehicleType,
                            "drivingVehicleType"
                        ),
                        usageType: this.optionsFilter(res.data.usageType, "usageType"),
                        fuelType: this.optionsFilter(res.data.fuelType, "fuelType"),
                        // heavyDieselVehicleEmissionPhoto:res.data.heavyDieselVehicleEmissionPhoto
                    };
                }
            });
        },
       
        //
        getQueryDictDetailByCodeWay(dictCode) {
            masterDataApi.getQueryDictDetailByCode(dictCode).then((res) => {
                if (res.code == 200) {
                    let name = `${dictCode}`;
                    this.$set(this.selectOptions, name, res.data.sysDictDataDetailList);
                
                }
            });
        },
        //
        /*审核操作 start*/
        auditWay() {
            this.auditVisile = true;
        },
        handleAuditSubmit() {
            this.$refs.auditParams.validate((valid) => {
                if (valid) {
                    masterDataApi
                        .vehicleInfoAudited({
                            ...this.auditParams,
                            id: this.$route.params.id,
                        })
                        .then((res) => {
                            if (res.code == 200) {
                                this.auditVisile = false;
                                this.auditParams == this.$options.data().auditParams;
                                this.$message.success("审核成功");
                                this.getAuditInfoQueryListByTransportId()
                                this.getDetail();
                            }
                        });
                } else {
                    this.$message.warning("请检查信息");
                    return false;
                }
            });
            // masterDataApi.vehicleInfoAudited
        },
        handleAuditCancle() {
            this.auditParams = this.$options.data().auditParams;
            this.resetForm("auditParams");
            this.auditVisile = false;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /*审核操作 end*/

        /*编辑车辆  start*/
        update() {
            this.$router.push({
                path: `/logistics/vehicleInfor/update/${this.$route.params.id}`,
            });
        },

        /*编辑车辆 end*/

        //   删除车辆
        edit() {
            this.$confirm("确定删除吗", "取消", {
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                closeOnClickModal: false,
            }).then(() => {
                let id = this.$route.params.id;
                masterDataApi.delVehicleInfo(id).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("操作成功")
                        closeActiveTag(this, "/logistics/vehicleInfor/list");
                    }
                });
            });
        },
        // 查询关联车辆表格信息

        getRelevanceVehicleTableList() {
            let { pageSize } = this.$refs.relevanceVehicleTablePage;
   
            let params = {

          
                pageSize: pageSize,
                pageNum: this.relevanceVehicleCurrentPage


            }
            beiGangApi.logisticsVehicleInfoQueryRelate(
                {id:this.detailParams.id,...params}
            ).then(res=>{
                if(res.code==200){
                    this.relevanceVehicleTotal  = res.total
                    this.relevanceVehicleData = res.rows
                }
            })
        },
        // 查询表格信息
        getTableList() {
            let { pageSize } = this.$refs.tablePage;
        },
        tabHandleClick(tab, event) {
            console.log(tab, event);
            if(tab.index==1){
                this.getRelevanceVehicleTableList()
            }
        },
        relevanceVehicleHandleCurrentChange(v) {
            this.relevanceVehicleCurrentPage = v;
            this.getRelevanceVehicleTableList();
        },
        relevanceVehicleHandleSizeChange(v) {
            this.pageSize = v;
            this.relevanceVehicleCurrentPage = 1;
            this.getRelevanceVehicleTableList();
        },
        handleCurrentChange(v) {
            this.currentPage = v;
            this.getTableList();
        },
        handleSizeChange(v) {
            this.pageSize = v;
            this.currentPage = 1;
            this.getTableList();
        },
        handleSearchSubmit() {
            this.currentPage = 1;
            this.getTableList();
        },
        handleSearchReset() {
            this.currentPage = 1;
            this.$refs.tablePage.clearSelection();
            this.getTableList();
        },
    },
};
</script>

<style lang="scss" scoped>
.vehicleInforDetail {
    padding: 30px;

    .top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .top_l {
            display: flex;

            .userinfo {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }
    }
}

.company {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #0076ff;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 0.5rem;
    margin-right: 16px;

    .logo {
        width: 51px;
        height: 51px;
    }
}
</style>
